<template>
  <div id="jobTopSearch">
    <h1 class="con-right-title">
      实物列表订单
    </h1>
    <div class="search-box">
      <el-form
        ref="ruleForm"
        :inline="true"
        :model="formInline"
        :rules="rules"
        class="demo-form-inline"
      >
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="formInline.phone"
            placeholder="请输入手机号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="大鹏号" prop="dpAccount">
          <el-input
            v-model="formInline.dpAccount"
            placeholder="大鹏号查找"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="快递号" prop="trackingNumber">
          <el-input
            v-model="formInline.trackingNumber"
            placeholder="快递号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="订单时间" prop="currentTime">
          <el-date-picker
            v-model="formInline.currentTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getTime"
            :picker-options="pickerOptions"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="商品名称" prop="goodsName">
          <el-input
            v-model="formInline.goodsName"
            placeholder="请输入商品名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="快递状态" prop="orderStatus">
          <el-select
            v-model="formInline.orderStatus"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动类型" prop="activityType">
          <el-select
            v-model="formInline.activityType"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in activesOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动名称" prop="activityName">
          <el-input
            v-model="formInline.activityName"
            placeholder="请输入活动名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item class="s-btn">
          <el-button
            type="success"
            icon="el-icon-search"
            @click="toSearch('ruleForm')"
          >
            查询
          </el-button>
          <el-button type="success" plain @click="reset">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { getDay } from '@utils/yesterday'
export default {
  name: 'ActivityTopSearch',
  msg: '实物奖品订单-顶部搜索',
  watch: {
    'formInline.currentTime': {
      immediate: true,
      handler(newV, oldV) {
        if (newV == null || newV.length == 0) {
          this.formInline.endTime = ''
          this.formInline.startTime = ''
        }
        if (newV.length > 1) {
          this.formInline.endTime = newV[1]
          this.formInline.startTime = newV[0]
        }
      },
      deep: true
    }
  },
  props: {
    formInline: {
      type: Object,
      default: function() {
        return {
          currentTime: [],
          activityName: '',
          activityType: '',
          dpAccount: '',
          endTime: '',
          startTime: '',
          goodsName: '',
          orderStatus: '',
          phone: '',
          trackingNumber: ''
        }
      }
    }
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const start = new Date()
              const end = new Date()
              start.setHours(0, 0, 0, 0)
              end.setHours(23, 59, 59, 0)

              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              start.setHours(0, 0, 0, 0)
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
              end.setHours(23, 59, 59, 0)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              start.setHours(0, 0, 0, 0)
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 7)
              end.setHours(23, 59, 59, 0)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              start.setHours(0, 0, 0, 0)
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 30)
              end.setHours(23, 59, 59, 0)
              picker.$emit('pick', [start, end])
            }
          }
          // {
          //   text: '最近三个月',
          //   onClick(picker) {
          //     const end = new Date()
          //     const start = new Date()
          //     start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
          //     picker.$emit('pick', [start, end])
          //   }
          // }
        ]
      },
      checkSpanId: 0,
      // timeList: [
      //   { id: 1, time: '今' },
      //   { id: 2, time: '昨' },
      //   { id: 3, time: '近七天' },
      //   { id: 4, time: '近三十天' }
      // ],
      time: [],
      checkCollege: '',
      collegeList: [],
      statusOptions: [],
      activesOptions: [],

      activesValue: 'all',
      statusValue: 'all',
      userType: [],
      rules: {
        activityId: {},
        type: {},
        currentTime: [],
        activityName: '',
        activityType: '',
        orderStatus: '',
        goodsName: '',
        trackingNumber: '',
        dpAccount: '',
        phone: ''
      },

      pickerTopDataDay: {
        disabledDate(time) {
          //昨天之后不可选
          const yesterday = new Date() - 3600 * 1000 * 24 * 1
          return time.getTime() < yesterday
        }
      }
    }
  },
  mounted() {
    this.getColleges()
  },
  methods: {
    getTime(val) {
      // this.formInline.startTime =val[0]
      // this.formInline.endTime = val[1]
    },
    checkSpan(id) {
      this.checkSpanId = id
      let newDate = new Date()
      // const year = newDate.getY
    },
    async getColleges() {
      let data = await sysNormalDisable('sys_college', 'sys_college')
      let addAll = [{ dictLabel: '全部', dictValue: '' }]
      this.collegeList = addAll.concat(data)

      let expressAge = await sysNormalDisable(
        'expressage_status',
        'expressage_status'
      )
      let obj = [
        {
          dictValue: '',
          dictLabel: '全部'
        }
      ]
      this.statusOptions = obj.concat(expressAge)

      let active = await sysNormalDisable(
        '420_specific_activity_type',
        '420_specific_activity_type'
      )
      let activeObj = [
        {
          dictValue: '',
          dictLabel: '全部'
        }
      ]
      this.activesOptions = activeObj.concat(active)
    },
    toSearch(formName) {
      this.$parent.searchParams.pageNum = 1  
      this.$emit('toSearch')
    },
    /* 重置 */
    reset() {
      this.$refs['ruleForm'].resetFields()
    },
  }
}
</script>

<style lang="less">
#jobTopSearch {
  .el-input {
    &.el-input--suffix {
      width: 182px !important;
    }
  }

  label.el-form-item__label {
    width: 70px !important;
  }
}
</style>
